<template>
  <div class="audio" :class="`themeTop-${theme.theme}`">
    <div class="img" @click="sendGetLyric" v-if="audio.song.length">
      <p>{{ audio.song[sort].name }}</p>
      <img :src="(audio.song[sort].picc as string)" alt="" />
    </div>
    <div class="btnLeft">
      <!-- 向左按钮 -->
      <svg class="icon" @click="sortAddOfMinus(-1)">
        <use :xlink:href="iconPathLeft[`${theme.theme}_Left`]"></use>
      </svg>
      <!-- 正在播放 -->
      <svg
        class="icon"
        @click="onPauseOrPlay('stop')"
        v-if="audio.musicList.length && !planStop"
      >
        <use :xlink:href="iconPathLeft[`${theme.theme}_stop`]"></use>
      </svg>
      <!-- 正在停止 -->
      <svg class="icon" @click="onPauseOrPlay('play')" v-else>
        <use :xlink:href="iconPathLeft[`${theme.theme}_play`]"></use>
      </svg>
      <!-- 向右按钮 -->
      <svg class="icon iconRight" @click="sortAddOfMinus(1)">
        <use :xlink:href="iconPathLeft[`${theme.theme}_Left`]"></use>
      </svg>
    </div>
    <div class="schedule">
      <p class="start">{{ startTime }}</p>
      <!-- :class="{ animationName: audio.audioUrl }" -->
      <div class="ware" @click="location">
        <div
          class="progress progressWidth"
          :style="planStop ? 'animation-play-state: paused' : ''"
          @click="location"
        ></div>
      </div>

      <p class="end">{{ audio.song.length ? audio.song[sort].time : "00:00" }}</p>
    </div>
    <div class="btnRight">
      <!-- 声音-->
      <svg class="icon">
        <use :xlink:href="iconPathRight[`${theme.theme}_sound`]"></use>
      </svg>
      <span class="volume" @click="volume">
        <span class="volume2" @click="volume" ref="volumeRef"></span>
      </span>
      <!-- 播放列表 -->
      <svg class="icon">
        <use :xlink:href="iconPathRight[`${theme.theme}_lyric`]"></use>
      </svg>
      <!-- 歌词 -->
      <svg class="icon">
        <use :xlink:href="iconPathRight[`${theme.theme}_item`]"></use>
      </svg>
      <!-- 歌单 -->
      <svg class="icon">
        <use :xlink:href="iconPathRight[`${theme.theme}_list`]"></use>
      </svg>
    </div>
  </div>
  <!-- 歌词 -->
  <Lyric
    :LyricInfo="LyricInfo"
    :time="startTime"
    @lyricShow="LyricInfo.lyricShow = false"
    :comment="comment"
  />

  <audio
    :src="audio.musicList[sort]"
    ref="audioRef"
    :autoplay="!!audio.musicList.length"
    class="audioHid"
    @timeupdate="onTimeupdate"
    @loadedmetadata="onLoadedmetadata"
    @ended="ended"
  />
</template>

<script setup lang="ts">
import { ref, reactive, watch, nextTick } from "vue";
import { useThemeColor } from "@/store/themeColor";
import { useSendReq } from "@/store/sendReq/index";
import { useAudio } from "@/store/audio";
import Lyric from "@/view/common/lyric.vue";

const theme = useThemeColor();
const audio = useAudio();
const sendReq = useSendReq();
const audioRef = ref();
const progressWidth = ref("0");
const volumeRef = ref();

const planStop = ref(false);

const endTime = ref("00:00");
const startTime = ref("00:00");
const x = ref();
const sort = ref(0);
const LyricInfo = reactive({
  lyricWrite: "",
  lyricShow: false,
  imgUrl: "",
  name: "",
  artist: "",
});
const comment = reactive<comment[]>([]);
// 红线
// 动画时间
// audioRef.value.playing ? pause() : play();
const iconPathLeft: Record<string, string> = reactive({
  white_Left: "#icon-hz-copy",
  black_Left: "#icon-bz-copy",

  white_play: "#icon-hb-copy",
  black_play: "#icon-hb-copy-copy",

  white_stop: "#icon-bzt-copy",
  black_stop: "#icon-hzt",
});

const iconPathRight: Record<string, string> = reactive({
  white_sound: "#icon-shengyin",
  black_sound: "#icon-bsy-copy",

  white_lyric: "#icon-hgc-copy",
  black_lyric: "#icon-bgc-copy",
  // 列表
  white_item: "#icon-hlb-copy",
  black_item: "#icon-blb-copy",
  // 歌单
  white_list: "#icon-hgd-copy",
  black_list: "#icon-bgd-copy",
});
// 当前时间
const onTimeupdate = (e: any) => {
  let h = (e.target.currentTime / 60).toString().split(".")[0];
  let s = (e.target.currentTime % 60).toString().split(".")[0];
  +s < 10 && (s = "0" + s);
  +h < 10 && (h = "0" + h);
  startTime.value = `${h}:${s}`;
  // 每秒
  x.value = 1145 / +endTime.value.slice(0, endTime.value.length - 1);
  // 防止报错
  if (progressWidth.value && x.value) {
    progressWidth.value = x.value * e.target.currentTime + "px";
  }
  // 红色进度条宽度
  // progressWidth.value.style.width =
  //   // 先算出每秒走多少 1145 是总距离  endTime.value 是总共时间
  //   // 1145 /toNumber(endTime.value.slice(0, endTime.value.length - 1))
  //   (e.target.currentTime * 1145) /
  //     toNumber(endTime.value.slice(0, endTime.value.length - 1)) +
  //   "px";
};
// 总时长
const onLoadedmetadata = (e: any) => {
  endTime.value = e.target.duration + "s";
};
// 让音频暂停 开始
const onPauseOrPlay = (behavior: string) => {
  if (audio.musicList.length) {
    const a: Record<string, any> = {
      stop: [true, "pause"],
      play: [false, "play"],
    };
    audioRef.value[a[behavior][1]]();
    planStop.value = a[behavior][0];
  }
};

// 点击音频进度条
const location = (e: any) => {
  //  audioRef.value.currentTime 是现在音频播放的时间
  // e.offsetX / x.value; 是当前点击的距离和每秒走多少距离
  audio.musicList.length && (audioRef.value.currentTime = e.offsetX / x.value);
};
// 设置声音
nextTick(() => {
  volumeRef.value.style.width = "100%";
});
const volume = (e: any) => {
  volumeRef.value.style.width = e.offsetX + "px";
  // 设置声音
  audioRef.value.volume = e.offsetX / 125;
};
// 播放 上一首 下一首
const sortAddOfMinus = (num: number) => {
  sort.value += num;
  sort.value < 0 && (sort.value = 0);
  LyricInfo.imgUrl = audio.song[sort.value].picc as string;
};
// 当音频播放完 会触发
const ended = () => {
  sort.value++;
  // 播放完就没有了
  sort.value == 21 && (sort.value = 0);
  LyricInfo.lyricShow && sendGetLyric();
};
// 歌词 评论
const sendGetLyric = () => {
  LyricInfo.name = audio.song[sort.value].name as string;
  LyricInfo.artist = audio.song[sort.value].artist as string;

  const params: sendParams = {
    id: audio.song[sort.value].id,
    offset: 1,
    limit: 30,
  };
  sendReq.getLyric(audio.song[sort.value].id).then((res) => {
    LyricInfo.lyricWrite = res.lrc.lyric;
    LyricInfo.lyricShow = true;
  });

  sendReq.getComment(params).then((res) => {
    comment.length = 0;
    res.comments.forEach((item: any) => {
      const a: comment = {};
      a.content = item.content;
      a.time = sendReq.formatDate(item.time);
      a.timeStr = item.timeStr;
      a.avatarUrl = item.user.avatarUrl;
      a.nickname = item.user.nickname;
      comment.push(a);
    });
  });
};
watch(
  () => audio.musicList,
  () => {
    sort.value = 0;
    // LyricInfo.imgUrl = audio.song[0]?.picc as string;
    (function a() {
      if (audio.song.length && audio.song[0]?.picc) {
        LyricInfo.imgUrl = audio.song[0].picc as string;
        return;
      }
      setTimeout(() => {
        a();
      });
    })();
  }
);
// 弹框禁止页面滚动
watch(
  () => LyricInfo.lyricShow,
  (n, l) => {
    if (n) audio.stopMove();
    else audio.Move();
  }
);
</script>

<style scoped lang="less">
.progressWidth {
  width: v-bind(progressWidth);
}
.audio {
  width: 100%;
  position: fixed;
  height: 77px;
  top: 100%;
  z-index: 99;
  transform: translateY(-100%);
  left: 0;
  display: flex;
  align-items: center;
  .img {
    position: absolute;
    bottom: 77px;
    height: 50px;
    display: flex;
    align-items: center;
    p {
      width: fit-content;
      margin: 0 10px;
    }
    img {
      border-radius: 5px;
      height: 50px;
      width: 50px;
    }
  }
  .btnLeft {
    margin-left: 85px;
    .icon {
      font-size: 40px;
      margin-right: 50px;
    }
    .iconRight {
      transform: rotate(180deg);
    }
  }
  .btnRight {
    align-items: center;
    display: flex;
    > .icon {
      font-size: 30px;
      margin-right: 50px;
      &:nth-child(1) {
        margin: 5px;
      }
    }
    .volume {
      cursor: pointer;
      margin-right: 50px;
      display: block;
      width: 125px;
      height: 3px;
      background-color: #bebdbd;
      position: relative;
      .volume2 {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 50;
        height: 100%;

        background-color: red;
      }
    }
  }
  .schedule {
    display: flex;
    width: 1300px;
    .ware {
      width: 1145px;
      height: 4px;
      background-color: #bebdbd;
      position: relative;
      margin: calc(1em / 3) 10px 0;
      cursor: pointer;
      border-radius: 5px;

      .progress {
        transition: width 0.06s;
        border-radius: 5px;
        cursor: pointer;
        z-index: 99;
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        background-color: red;
        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 100%;
          transform: translate(-100.5%, -50%);
          width: 7px;
          height: 7px;
          border-radius: 5px;
          background-color: red;
        }
      }
    }
  }
}
.audioHid {
  background-color: transparent;
}
</style>
